import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { RouterStore } from 'mobx-react-router';
import CaseStore from '../../stores/CaseStore';
import { NavBar, Icon } from 'antd-mobile';
import { Table } from 'antd';

import './HotEventDetails.scss';

interface HotEventProps {
    caseStore: CaseStore;
    routingStore: RouterStore;
}

@inject('caseStore', 'routingStore')
@observer
export default class HotEventDetails extends Component<HotEventProps> {
    componentWillMount() {
        this.props.caseStore.getHotEventDetails();
    }
    render() {
        const { caseStore, routingStore } = this.props;
        const title = caseStore.CaseListCategory;
        const hotEventDetails = caseStore.HotEventDetails;
        const detailsColumns = [
            {
                dataIndex: 'department',
                key: 'department',
                render: (text: string, record: string, index: number) => {
                    return (
                        <div className="hot-details-table">
                            {text}
                        </div>
                    );
                }
            },
            {
                dataIndex: 'amount',
                key: 'amount',
                render: (text: string, record: string, index: number) => {
                    return (
                        <div
                            className={index !== 0 ? 'hot-amount' : 'hot-details-table'}
                            onClick={() => {
                                if (index !== 0) {
                                    caseStore.setCaseListCategory('热事件工单');
                                    routingStore.push('/case_list');
                                }
                            }}
                        >
                            {text}
                        </div>
                    );
                }

            },
            {
                dataIndex: 'rate',
                key: 'rate',
                render: (text: string, record: string, index: number) => {
                    return (
                        <div className="hot-details-table">{text}</div>);
                }
            }
        ];
        return (
            <div className="hot-details-container">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    leftContent={<span style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}>返回</span>}
                    onLeftClick={() => { routingStore.goBack(); }}
                >
                    详情
                </NavBar>
                <div className="hot-details-title">
                    <div>{title}</div>
                    <div onClick={() => { routingStore.push('/hot_event_map'); }}>地图查看</div>
                </div>
                <Table
                    dataSource={hotEventDetails}
                    columns={detailsColumns}
                    bordered={true}
                    pagination={false}
                    showHeader={false}
                />
            </div>
        );
    }
}